<template>
  <div class="muzi muzi-form">
    <el-form :model="form" :rules="rules" ref="FormHandle" v-loading="loading" label-width="100px">
      <muzi-divide name="基本信息"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分类" prop="type">
            <el-select v-model="form.type" placeholder="客户类型">
              <el-option v-for="item in options.type" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签" prop="tag">
            <el-select v-model="form.tag" placeholder="客户标签">
              <el-option v-for="item in options.tags" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="department">
            <el-input v-model="form.department" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="业务员" prop="salesman">
            <el-input v-model="form.salesman" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <muzi-divide name="联系信息"/>
      <el-row>
        <el-col :span="8">
          <el-form-item label="联系人" prop="contact" required>
            <el-input v-model="form.contact" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option v-for="item in options.sex" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机" prop="mobile" required>
            <el-input v-model="form.mobile" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="座机" prop="tel">
            <el-input v-model="form.tel" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="operating" :gutter="5">
      <el-col :offset="19" :span="5">
        <el-button type="primary" size="large" :loading="saving" @click="onSubmit()">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { sex } from '@/data/common'
import { type, tags } from '@/data/clientele'

export default {
  data() {
    return {
      options: {
        type, tags, sex
      },
      id: null,
      saving: false,
      loading: false,
      form: {},
      rules: {
        name: [
          {required: true, message: '请输入客户名称'}
        ],

      }
    }
  },
  mounted() {
    const { serial } = this.$route.query;
    if (serial) {
      this.$API.clientele.detail.get(serial).then(res => {
        if (res.success) {
          this.form = res.data
        }
      })
    }
  },
  methods: {
    onSubmit() {
      this.$refs.FormHandle.validate(async (valid) => {
        if (valid) {
          this.saving = true;
          let res = await this.$API.clientele.create.post(this.form);
          this.saving = false;
          if (res.success) {
            this.$message.success("保存成功")
            this.$router.push({name: "clientele", replace: true})
          } else {
            this.$alert(res.message, "提示", {type: 'error'})
          }
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>

</style>
